<template>
  <div class="article-ranking-container">
    <el-card>
      <el-table :data="articleList" border>
        <el-table-column
          type="index"
          :label="$t('msg.article.ranking')"
          prop="ranking"
          width="120"
        ></el-table-column>
        <el-table-column
          :label="$t('msg.article.title')"
          prop="title"
        ></el-table-column>
        <el-table-column
          :label="$t('msg.article.author')"
          prop="author"
        ></el-table-column>
        <el-table-column
          :label="$t('msg.article.publicDate')"
          prop="publicDate"
        ></el-table-column>
        <el-table-column
          :label="$t('msg.article.desc')"
          prop="desc"
        ></el-table-column>
        <el-table-column :label="$t('msg.article.action')">
          <template #default="{ row }">
            <el-button type="primary" size="mini" @click="onShowClick(row)">{{
              $t('msg.article.show')
            }}</el-button>
            <el-button type="danger" size="mini" @click="onRemoveClick(row)">{{
              $t('msg.article.remove')
            }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 20, 50, 100]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onActivated } from 'vue'
import { getArticleList } from '@/api/article'
import { watchSwitchLang } from '@/utils/i18n'

const articleList = ref([])
const page = ref(1)
const size = ref(10)
const total = ref(0)

const getArticleListData = async () => {
  const res = await getArticleList({
    page: page.value,
    size: size.value
  })
  articleList.value = res.list
  total.value = res.total
  console.log(res)
}
getArticleListData()
watchSwitchLang(getArticleListData)
onActivated(getArticleListData)

const onShowClick = (row) => {
  console.log(row)
}

const onRemoveClick = (row) => {
  console.log(row)
}

const handleSizeChange = (currentSize) => {
  size.value = currentSize
  getArticleListData()
}
const handleCurrentChange = (currentPage) => {
  page.value = currentPage
  getArticleListData()
}
</script>

<style lang="scss" scoped>
.article-ranking-container {
  .header {
    margin-bottom: 20px;
    .dynamic-box {
      display: flex;
      align-items: center;
      .title {
        margin-right: 20px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }

  .el-table__row {
    cursor: pointer;
  }

  .pagination {
    margin-top: 20px;
    text-align: center;
  }
}
</style>
